<template>
  <div>
    <div class="top">
      <span @click="chaegs()">我的订单</span>
      <span>></span>

      <span style="color: #ffbe37">详情</span>
    </div>
    <div class="center">
      <div class="cr_info1">
        <p class="x5TXt">订单信息</p>
        <div class="layer">
          <div class="dlex2-div">
            <span class="txt1"
              >订单类型：<a v-if="orderDetails.orderType == '01'">教育课程</a
              ><a v-else>商品</a></span
            >
            <span class="txt1"
              >订单编号：<a>{{ orderDetails.orderNo }}</a></span
            >
          </div>
          <div class="dlex2-div">
            <span class="txt1"
              >创建时间：<a>{{ orderDetails.orderDate }}</a></span
            >
            <span class="txt1"
              >支付方式：<a v-if="orderDetails.payType == '01'">微信支付</a
              ><a v-else>支付宝</a></span
            >
          </div>
          <div class="dlex2-div" v-if="orderDetails.payDate">
            <span class="txt1"
              >付款时间：<a>{{ orderDetails.payDate }}</a></span
            >
          </div>
          <div class="dlex2-div">
            <span v-if="paymentFalg" class="txt1">订单状态：<a>未支付</a></span>
            <span class="txt1" v-else>订单状态：<a>已支付</a></span>
          </div>
        </div>
      </div>

      <!-- 发票信息 -->

      <!-- <div class="cr_info1">
        <p class="x5TXt">发票信息</p>
        <div class="layer">
          <div class="dlex2-div">
            <span class="txt1">抬头类型：<a>企业单位</a></span>
          </div>
          <div class="dlex2-div">
            <span class="txt1">发票抬头：<a>北京华夏元道科技有限公司</a></span>
          </div>
          <div class="dlex2-div">
            <span class="txt1">识别号：<a>12324jksdhfkjdshnf</a></span>
          </div>
          <div class="dlex2-div">
            <span class="txt1">电子邮箱：<a>213124324@qq.com</a></span>
          </div>
        </div>
      </div> -->

      <!-- 订单信息 -->

      <div class="cr_info1">
        <p class="x5TXt">商品信息</p>
        <div
          class="layer"
          v-for="(item, index) in orderDetails.commList"
          :key="index"
        >
          <div class="dlex2-div">
            <img class="image" :src="imageWebUrl + item.cover" alt="" />
            <div class="basics">
              <span class="titleTxt1">{{ item.name }}</span
              ><span class="titleTxt2">来源：{{ item.source }}</span>
            </div>
            <span class="redTxt">¥{{ item.originalPrice }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom dlex2-div" v-if="paymentFalg">
      <div class="autn">
        <div class="at_rignt">
          <div class="atn">
            <a-button class="dlex_btn" @click="warning(orderDetails.orderNo)">
              取消订单
            </a-button>
            <a-button
              class="dlex_btn"
              @click="getJumporder(orderDetails.orderNo)"
              type="primary"
            >
              立即支付
            </a-button>
          </div>
        </div>
      </div>
    </div>
    <div v-html="Alipay"></div>
  </div>
</template>

<script>
export default {
  props: {
    detFlag: Boolean,
  },
  data() {
    return {
      Alipay: null,
      selBorder: true,
      selvalue: true,
      // 当前支付完成状态
      paymentFalg: false,
      // 详情
      orderDetails: {},
    };
  },
  methods: {
    chaegs() {
      this.$emit("changeComponent1Data", true);
    },
    // 选中该支付方式
    selpayment(e) {
      this.selBorder = e;
    },
    // 同意/拒绝支付协议
    selagree() {
      this.selvalue = !this.selvalue;
    },
    // 跳转订单购买页
    getJumporder(e) {
      if (!this.$store.state.token) {
        this.$refs["login"].tabIndex = 0;
        this.$refs["login"].tabType = 0;
        this.$refs["login"].maskClosable = true;
        e;
        this.$refs["login"].visible = true;
        return;
      }
      this.$router.push("/order/recordOrder?orderNo=" + e);
    },
    // 取消订单
    warning(e) {
      let _th = this;
      this.$confirm({
        title: "提示信息",
        content: "您是否确认取消该订单？",
        onOk() {
          _th
            .$ajax({
              url: "/order/order/update",
              method: "post",
              params: {
                orderNo: e,
                payStatus: "05",
              },
            })
            .then((res) => {
              if (res.code == 200) {
                return res.msg
                // console.log(res.msg);
              }
            });
          return new Promise((resolve, reject) => {
            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
          }).catch(() => console.log("Oops errors!"));
        },
        onCancel() {},
      });
    },
    // 查询订单详情
    getOrder(e) {
      this.$ajax({
        url: "/order/order/get",
        method: "post",
        params: {
          orderNo: e,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$set(this, "orderDetails", res.data);
          // 逻辑：只要支付完成则三个值一个也不可能为空
          if (
            res.data.payStatus == null ||
            res.data.payDate == null ||
            res.data.payCode == null
          ) {
            // 支付未完成
            if (res.data.payStatus == "05") {
              this.paymentFalg = false;
            } else {
              this.paymentFalg = true;
            }
          }
        } else {
          // 支付完成
          this.paymentFalg = false;
        }
      });
    },
    // 生成支付宝支付
    getAlipay(e) {
      this.$ajax({
        url: "/order/alipay/alipaycode?orderId=" + e,
        method: "POST",
        params: {},
      }).then((res) => {
        this.Alipay = res;
        this.$nextTick(() => {
          document.forms[0].submit();
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.top {
  span {
    margin-left: 5px;
    font-size: 12px;
    font-family: PingFang SC;
    color: #999999;
    cursor: pointer;
  }
  span:nth-child(1) {
    margin-left: 0px;
  }
}
.center {
  width: 100%;
  overflow: hidden;
  .cr_info1 {
    width: 100%;
    margin-top: 24px;
    overflow: hidden;
    .layer {
      width: 100%;
      padding: 20px;
      border-bottom: #eeeeee 1px solid;
      .dlex2-div {
        margin-bottom: 24px;
      }
      .txt1 {
        font-size: 14px;
        font-family: PingFang SC;
        color: #999999;
        flex: 1;
        a {
          color: #333333;
        }
      }
      .txt2 {
        font-size: 14px;
        font-family: PingFang SC;
        color: #999999;
        a {
          color: #333333;
        }
      }
    }
  }
  .fatxt {
    margin-top: 16px;
    float: right;
    span {
      font-size: 14px;
      font-family: PingFang SC;
      color: #999999;
      a {
        color: #ca0000;
      }
    }
  }
}

.x5TXt {
  width: 100px;
}
.image {
  width: 144px;
  height: 81px;
  border: #eeeeee solid 1px;
}
.basics {
  width: 600px;
  margin-left: 32px;
}
.titleTxt2 {
  font-size: 15px;
  color: #666666;
}
.grey {
  flex: 1;
  .dlex1-div {
    padding-bottom: 8px;
  }
  .dlex3-div {
    margin-top: 17px;
    margin-bottom: 24px;
  }
  .dlex_img {
    flex-shrink: 0;
    width: 144px;
    height: 81px;
  }

  .select {
    background-image: url("~@/assets/image/sexback.png");
    background-size: 100% 100%;
    border: none !important;
  }
  .dlex_txt {
    width: 140px;
    height: 44px;
    cursor: pointer;
    border: 1px solid #999999;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      font-size: 16px;
      font-family: PingFang SC;
      justify-content: center;
      color: #333333;
    }
  }
  .dlex_introduce {
    margin-left: 32px;
    flex: 1;
    span {
      display: block;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #333333;
      margin-top: 8px;
    }
    p {
      font-size: 15px;
      font-family: PingFang SC;
      color: #666666;
      margin-top: 16px;
    }
  }
  .price {
    overflow: hidden;
    margin-top: 19px;
    text-align: right;
  }
}
.autn {
  overflow: hidden;
  .at_rignt {
    float: right;
    padding: 16px 0;
    text-align: right;
  }
  .sobtn {
    background-color: #ffffff;
    margin-right: 8px;
  }
  .dlex_img2 {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    cursor: pointer;
  }
  .atn {
    margin-top: 16px;
  }
  .dlex_btn {
    width: 120px;
    height: 40px;
    margin-left: 10px;
  }
}
.greyBlue {
  display: inline-block;
}
</style>
